---
description:
  How to use the Webpack Loader. Learn how to load GraphQL queries over `.graphql` files using
  Webpack.
---

# Webpack Loader

You can load GraphQL queries over `.graphql` files using Webpack. The package
[`@graphql-tools/webpack-loader`](https://www.npmjs.com/package/@graphql-tools/webpack-loader) comes
with a loader easy to setup and with some benefits:

1. Do not process GraphQL ASTs on client-side
1. Enable queries to be separated from logic

In the example below, we create a new file called `currentUser.graphql`:

```graphql filename="currentUser.graphql"
query CurrentUserForLayout {
  currentUser {
    login
    avatar_url
  }
}
```

You can load this file adding a rule in your webpack config file:

```ts
rules: [
  {
    test: /\.(graphql|gql)$/,
    exclude: /node_modules/,
    loader: '@graphql-tools/webpack-loader',
  },
];
```

As you can see, `.graphql` or `.gql` files will be parsed whenever imported:

```ts
import { Apollo } from 'apollo-angular';
import { Component } from '@angular/core';
import currentUserQuery from './currentUser.graphql';

@Component({
  // ...
})
class ProfileComponent {
  constructor(apollo: Apollo) {
    apollo.query({ query: currentUserQuery }).subscribe(result => {
      // ...
    });
  }
}
```

## Optional: Install and Configure a Custom webpack Configuration (When Using Angular CLI)

Install `@angular-builders/custom-webpack`:

```sh npm2yarn
npm i @angular-builders/custom-webpack
```

Then create a webpack configuration file `webpack.config.js` in your application root containing
your Webpack configuration (as listed above):

```js filename="webpack.config.js"
module.exports = {
  module: {
    rules: [
      {
        test: /\.(graphql|gql)$/,
        exclude: /node_modules/,
        loader: '@graphql-tools/webpack-loader',
      },
    ],
  },
};
```

After that, create your type-definition for your `.graphql` files, so TypeScript will transform them
into importable objects with `src/@types/graphql.d.ts`:

```ts filename="graphql.d.ts"
declare module '*.graphql' {
  import { DocumentNode } from 'graphql';
  const schema: DocumentNode;

  export = schema;
}
```

Next, update your TSConfig:

```jsonc filename="tsconfig.json"
{
  // ...
  "files": [
    // ...
    "src/@types/graphql.d.ts",
  ],
  "compilerOptions": {
    "typeRoots": [
      // ...
      "src/@types",
    ],
  },
}
```

Finally, you have to manipulate your `angular.json` to accept your customized webpack configuration:

```jsonc filename="angular.json"
{
  // ...
  "projects": {
    "<Your project name here>": {
      // ...
      "architect": {
        "build": {
          // ...
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js",
              "replaceDuplicatePlugins": true,
            },
          },
        },
        "serve": {
          // ...
          "builder": "@angular-builders/custom-webpack:dev-server",
        },
      },
    },
  },
}
```

_(Based on
[How to resolve import for the .graphql file with typescript and webpack](https://dev.to/open-graphql/how-to-resolve-import-for-the-graphql-file-with-typescript-and-webpack-35lf))_

### Jest

[Jest](https://facebook.github.io/jest/) can't use the Webpack loaders. To make the same
transformation work in Jest, use
[`@graphql-tools/jest-transform`](https://npmjs.com/package/@graphql-tools/jest-transform).

## Fragments

You can use and include fragments in `.graphql` files and have webpack include those dependencies
for you, similar to how you would use fragments and queries with the gql tag in plain JavaScript.

```graphql
#import "./UserInfoFragment.graphql"

query CurrentUserForLayout {
  currentUser {
    ...UserInfo
  }
}
```

See how we import the UserInfo fragment from another `.graphql` file (same way you'd import modules
in JavaScript).

And here's an example of defining the fragment in another `.graphql` file.

```graphql
fragment UserInfo on User {
  login
  avatar_url
}
```
